import React, { Component } from 'react';
import { List, ActionSheet } from 'antd-mobile';
import './userInfo.less';

const Item = List.Item;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

class UserInfo extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
	    	clicked: null,
	    }
	}

	openPhoto = (buttonIndex) => {
		console.log("选择相册"+buttonIndex);
	}

	uploadHeadImg = () => {
	    const BUTTONS = ['书城提供', '打开相机', '选取相册', '取消'];
	    ActionSheet.showActionSheetWithOptions({
      		options: BUTTONS,
	      	cancelButtonIndex: BUTTONS.length - 1,
     	 	maskClosable: true,
	      	'data-seed': 'logId',
	      	wrapProps,
	    },this.openPhoto);
  	}

  	componentWillUnmount(){
		ActionSheet.close();
	}

	render(){
		return(
			<div className="container userInfo">
				<List className="my-list">
			        <Item extra={<img className="my_head" src="assets/img/head.png"  onClick={this.uploadHeadImg}/>}>头像</Item>
			        <Item extra={'秋风扫落叶'}>昵称</Item>
			        <Item extra={'男'}>性别</Item>
			        <Item extra={'1992年4月11日'}>生日</Item>
			        <Item extra={'湖北武汉'}>所在地</Item>
		      	</List>
			</div>
		)
	}
}

export default UserInfo;